<template>
 <!--
    computed语法：
    如果你是选项式api：
    computed:{
        计算属性名(){
            return 值
        }
            num(){
            return this.a +this.b
            }
    }
    组合api:
   const 名字= computed(()=>{
    return 值
})
 完整的写法 可写可读
 const 名字= computed({
    get(){
    return 值
    },
    set(value){
        //这里是写逻辑
}
 })
 -->
<p>求a和b的和={{ num }}</p>

<div>
    <span>姓名：</span>
    <input type="text" v-model="usename">
</div>

</template>

<script setup>
import { ref, computed } from 'vue'
const a = ref(10)
const b = ref(20)
const num = computed(() => { 
    return a.value + b.value
})

// const usename = ref('okok')

const usename = computed({
    // getter 函数，当访问计算属性时被调用

    get() {
        // 返回字符串 "okok"
        return "okok"
    },
    // setter 函数，当计算属性被赋值时调用

    set(val) {
        // 打印传入的值
        console.log(val);
        
    }
})


</script>

<style scoped>

</style>